<template>
    <div class="height-100-per">
        <div id="drawing"></div>
    </div>
</template>

<script>
    import {Input} from 'ant-design-vue'
    import * as svgjs from '@svgdotjs/svg.js'
    import '@svgdotjs/svg.draggable.js'

    export default {
        name: "Three",
        components: {
            AInput: Input
        },
        data() {
            return {
                imgList: [
                    {
                        id: 'jungle1',
                        path: 'https://cn.vuejs.org/images/logo.png',
                        x: 40,
                        y: 200,
                        name: 'test1',
                        w: 80,
                        h: 80
                    },
                    {
                        id: 'jungle2',
                        path: 'https://cn.vuejs.org/images/logo.png',
                        x: 800,
                        y: 40,
                        name: 'test2',
                        w: 80,
                        h: 80
                    },
                ],
                lines: [],
                config: config.webpath,
            }
        },
        mounted() {
            let draw = svgjs.SVG().addTo("#drawing").size(5000, 5000);
            let g = draw.group();
            for (const i of this.imgList) {
                g.add(draw.group().id(i.id).draggable().on('dragmove', (e) => {
                    e.preventDefault();
                    if (e.detail.box.x < 0 || e.detail.box.y < 0) {
                        return false;
                    }
                    i.x = e.detail.box.cx;
                    i.y = e.detail.box.cy;
                    e.detail.handler.move(e.detail.box.x, e.detail.box.y);
                    for (let line of this.lines) {
                        console.log(line);
                        if (line.node.attributes.s.value === i.id) {
                            line.plot(i.x + 40, i.y, line.node.attributes.x2.value, line.node.attributes.y2.value);
                        }
                        if (line.node.attributes.e.value === i.id) {
                            line.plot(line.node.attributes.x1.value, line.node.attributes.y1.value, i.x + 40, i.y,);
                        }
                    }
                }).on('dragend.namespace', (e) => {
                    console.log(this.imgList);
                }).add(draw.image(i.path).size(i.w, i.h).center(i.x, i.y).attr({cursor: 'move'})).add(draw.text(i.name).center(i.x, i.y + i.h / 2)));
            }
            this.lines.push(draw.line(80, 200, 760, 40).attr({
                s: 'jungle1',
                e: 'jungle2',
                sp: '2',
                ep: '4'
            }).stroke({width: 1, color: '#000000'}));
            this.lines.push(draw.line(845, 45, 955, 45).attr({s: 'jungle2', e: '', sp: '2', ep: '4'}).stroke({
                width: 1,
                color: '#000000'
            }));
        },
        methods: {}
    }
</script>

<style scoped>

</style>
